import { Table, Space, Button, Popconfirm, Modal, Form, Input, message } from "antd";
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
import { user, removeAdmin, XiuGai } from "../../apis/user";
import Column from "antd/lib/table/Column";



type SearchProps = {};
export const User = (props: SearchProps) => {
  // 定义用户
  const [data, setdata] = useState();

  const [current, setCurrent] = useState(1); // 页码
  const [pageSize, setPageSize] = useState(5); // 每页显示个数
  const [curUser,setCurUser] = useState({})
  // 获取用户数据
  useEffect(() => {
    user().then((result) => {
      // console.log((result as any).data);
      setdata((result as any).data);
    });
  }, []);

  // const [type, setType] = useState('add') 
  const [addAdminVisible, setAddAdminVisible]= useState(false)

  const { Search } = Input;
  const onSearch = (value: string) => {
    console.log(value)
    if (value === '' ) {
      message.error('请输入金额')
      return
    }
    (curUser as any).balance += value as any *1
    XiuGai((curUser as any).id,curUser as any)
    
      setAddAdminVisible(false) // 模态框消失
      // 从新请求新的数据
      user().then((result) => {
        setdata((result as any).data);
      }); 
    // })
  };


  return (
    <Space direction="vertical" style={{ width: "100%" }}>
      <Table
        dataSource={data}
        pagination={{
          position: ["bottomRight"],
          current,
          pageSize,
          onChange: (page, pageSize) => {
            setCurrent(page);
            setPageSize(pageSize);
          },
          showTotal: (total) => {
            return <span>共有{total}条数据</span>;
          },
          showQuickJumper: true,
          pageSizeOptions: [5, 10, 20, 50],
        }}
      >
         <Column title="id" dataIndex="id" key="id" />
        <Column title="账号" dataIndex="user" key="address" />
        <Column title="密码" dataIndex="password" key="address" />
        <Column title="点击量" dataIndex="clickNum" key="address" />
        <Column title="是否为会员" dataIndex="isVip" key="address" />
        <Column title="会员积分" dataIndex="vPoints" key="address" />
        <Column title="会员余额" dataIndex="balance" key="address" />
        <Column 
          title="充值" 
          key="action" 
          render={(text, record, index) => (
            <Space>
              <Button 
                type="primary" 
                shape="circle" 
                icon={<EditOutlined />} 
                onClick={ () => {
                  console.log(text, record, index);
                  setCurUser((record as any))
                  setAddAdminVisible(true)
                } }
              />
              <Modal 
                title="充值" 
                open={ addAdminVisible }
                footer = { null }
                onCancel={ () => setAddAdminVisible(false) }
            
              >
                <Form    initialValues = {{ role: 1}} >
                  <p>余额:{(curUser as any).balance}</p>
                  <Form.Item
                    label="请输入金额"
                  >
                    <Search
                      prefix="￥"
                      placeholder="RMB"
                      allowClear
                      enterButton="确定"
                      size="large"
                      onSearch={onSearch}
                    />
                  </Form.Item>
                  <Button>确定</Button>
                </Form>
              </Modal>
            </Space>
          )}
        />

        <Column
          title="操作"
          key="action"
          render={(text, record, index) => (
            <Space>
              
              <Popconfirm
                title="确定删除吗?"
                onConfirm={() => {
                  console.log("aaa", record);

                  removeAdmin((record as any).id).then(() => {  // 删除
                    // console.log(result.key);
                    
                    // 重新获取数据
                    user().then((result) => {
                      // console.log((result as any).data);
                      setdata((result as any).data);
                    }); 
                  });
                }}
                onCancel={() => {}}
                okText="确定"
                cancelText="再想想"
              >
                <Button danger shape="circle" icon={<DeleteOutlined />} />
              </Popconfirm>
            </Space>
          )}
        />
      </Table>
    </Space>
  );
};
